.userinfo {
  height: 100%;

  .head {
    > div {
      position: absolute;
      top: 1rem;
      left: 1rem;
      width: 2rem;
      height: 2rem;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        width: 60%;
        height: 60%;
        margin-right: 5%;
        color: var(--text-color-white);
      }
    }


    > img {
      width: 100%;
    }
  }

  .content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background-color: var(--text-color-white);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 0 1rem 0 var(--shadow-color);
    padding-top: 5rem;
    transition: 0.3s;


    > img {
      position: absolute;
      top: -4rem;
      left: calc(50% - 4rem);
      height: 8rem;
      border: 2px solid var(--border-color);
    }

    li {
      padding: 0.5rem 1rem;
    }

    .infoUl {
      li {

        display: flex;
        justify-content: space-between;
        color: var(--text-color-gray);


        &:active {
          background-color: var(--border-color);
        }

        > p:nth-child(1) {
          width: 5rem;
        }

        > p:nth-child(2) {
          flex: 1;
          margin-right: 1rem;

          color: var(--text-color);
        }

        > p:nth-child(3) {
          transform: rotate(180deg);
        }
      }
    }
  }
}